<template>
  <div>
    <div class="pad">
      <div ref="masonryContainer">
        <div
          id="ranking"
          class="item"
        >
          <Ranking></Ranking>
        </div>
        <div
          v-for="(video,index) in videos"
          :key="index"
        >
          <VideoItem
            class="item"
            :videoData="video"
            @slide="openSwiperFulleScreen(index)"
          />
        </div>
      </div>
      <div
        v-if="swiper"
        class="swiper-container"
        :options="swiperOptions"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(video,index) in videos"
            :key="index"
          >
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
// 引入瀑布流式布局库
import Masonry from "masonry-layout";

import Swiper from "swiper";
import "swiper/css/swiper.css";

import VideoItem from "@/views/VideoItem";
import Ranking from "@/views/Ranking";
export default {
  name: "videoPage",
  data() {
    return {
      videos: [
        {
          title: "hehe1",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/2.mp4",
        },
        {
          title: "hehe2",
          videoUrl:
            "http://s33iwztmt.hb-bkt.clouddn.com/liNc-NpAAPTC-Pp-ljhrHwgPgEYW",
        },
        {
          title: "hehe3",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/3.mp4",
        },
        {
          title: "hehe4",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/4.mp4",
        },
        {
          title: "hehe5",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/1.mp4",
        },
        {
          title: "hehe6",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/2.mp4",
        },
        {
          title: "hehe7",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/4.mp4",
        },
        {
          title: "hehe8",
          videoUrl: "http://s33iwztmt.hb-bkt.clouddn.com/1.mp4",
        },
        {
          title: "hehe9",
          videoUrl:
            "http://s33iwztmt.hb-bkt.clouddn.com/liNc-NpAAPTC-Pp-ljhrHwgPgEYW",
        },
      ],
      swiper: null,
      swiperOptions: null,
    };
  },
  components: {
    VideoItem,
    Ranking,
  },
  created() {
    this.$nextTick(() => {
      const masonry = new Masonry(this.$refs.masonryContainer, {
        itemSelector: ".item",
        columnWidth: 320,
        originLeft: false,
      });
      masonry.layout();
    });
  },

  /* mounted() {
    const masonry = new Masonry(this.$refs.masonryContainer, {
      itemSelector: ".item",
    });

    this.$nextTick(() => {
      masonry.layout();
    });
  }, */
  methods: {
    openSwiperFulleScreen(index) {
      console.log(index);
      // 初始化swiper
      this.swiper = new Swiper(".swiper-container", {
        centeredSlides: true,
        initalSlide: index,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        direction: "vertical",
        watchOverflow: true,
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        preventClicks: false,
        mousewheel: true,
      });
      this.swiper.on("reachEnd", this.nextVideo(index));
      this.swiper.on("reachBeginning", this.prevVideo(index));
      document.addEventListener("mousewheel", this.handleMouseWheel(index));
    },
    // 初始化swiper
    initSwiper() {
      try {
        this.swiper = new Swiper(".swiper-container", this.swiperOptions);
      } catch (error) {
        console.error("Swiper initialization error:", error);
      }
    },
    // 切换下一个视频
    nextVideo(index) {
      // this.swiper.slideNext();
      this.swiper.slideTo(index + 1, 1000, false);
    },
    // 切换上一个视频
    prevVideo(index) {
      this.swiper.slideTo(index - 1, 1000, false);
    },
    // 滚动切换视频
    handleMouseWheel(event, index) {
      console.log(event);
      if (event.deltaY > 0) {
        this.nextVideo(index);
      } else if (event.deltaY < 0) {
        this.prevVideo(index);
      }
    },
  },
  beforeDestroy() {
    this.swiper.destroy();
    document.removeEventListener("wheel", this.handleMouseWheel);
  },
};
</script>

<style scoped>
#ranking {
  width: 250px;
  height: 400px;
  background-color: skyblue;
}

.item {
  margin-bottom: 10px;
}

.pad {
  padding-top: 10px;
}
</style>